<template>
	<view class="container box">
		<!-- <scroll-view class="videos" scroll-y="true"> -->
		<template v-for="(item,index) in sportsVideo">
			<view class="video-item">
				<uni-icons :type="item.fav?'heart-filled':'heart'" :color="item.fav?'red':'rgba(255,140,0,.6)'"
					size="30" class="favBtn" @click="favFn(index)"></uni-icons>
				<video :src="item.src" controls></video>
				<view class="video-head">
					<view class="video-name">
						{{item.name}}
					</view>
					<view class="video-desc text-overflow">
						{{item.desc}}
					</view>
				</view>
			</view>
		</template>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import {
		getCourseData,
		check,
		remove,
		addData
	} from '../../../database/index.js';
	export default {
		data() {
			return {
				sportsVideo: ''
			}
		},
		methods: {
			async favFn(index) {
				let [unique, msg] = await check('courserCollect', [{
					course_Id: this.sportsVideo[index].id,
					course_collector: this.$store.getters.getToken
				}])
				if (unique) {
					let [res, msg] = await addData('courserCollect', {
						course_Id: this.sportsVideo[index].id,
						course_collector: this.$store.getters.getToken
					}, '')
					if (res) {
						this.$showMsg(`已收藏`)
						this.sportsVideo[index].fav = !this.sportsVideo[index].fav
					}
				} else {
					let res = await remove('courserCollect', {
						course_Id: this.sportsVideo[index].id,
						course_collector: this.$store.getters.getToken
					})
					if (res) {
						this.$showMsg(`取消收藏`)
						this.sportsVideo[index].fav = !this.sportsVideo[index].fav
					} else {
						this.$showMsg(`取消收藏失败`)
					}
				}
			}
		},
		async onPullDownRefresh() {
			this.sportsVideo = await getCourseData()
		},
		async onLoad() {
			this.sportsVideo = await getCourseData()
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
	}



	.video-item {
		position: relative;
		text-align: center;
		margin-bottom: 20rpx;
		border-bottom: 1px solid rgba(119, 136, 153, .4);
		border-radius: 4rpx;
		padding: 0 20rpx;
		padding-bottom: 5rpx;

		.favBtn {
			z-index: 999;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}

		.video-head {
			text-align: left;
			color: black;

			.video-desc {
				color: $global_text;
				font-size: $uni-font-size-text;
				padding: $uni-text-padding;
				padding-left: 0;
				letter-spacing: $uni-text-interval;
			}
		}

		video {
			width: 100%
		}

	}
</style>